<template>
  <view class="testPaper">
    <uni-nav-bar title="专 题 练 习" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
    </uni-nav-bar>
 <!--   <view class="subject u-f-ac">
      <text class="fontsize24">学科:</text> -->
      <radio-components :value="subjectIndex" :range="subjects" rangekey="disciplineTitle" @update:value="PickerChange"></radio-components>

    <!-- </view> -->
    <scroll-view @scrolltolower="nextLoading" scroll-y class="heightAuto" v-if="testList.length>0">
      <view class="main">
        <view class="testlist u-f-jsb" v-for="(item,index) in testList" :key="index">
          <view class="testlist-item u-f-jsb u-f-ac" @click="toPage(item.status,item.id)">
            <view class="positionRe imgRe">
              <image class="imgTop32" :src="item.disciplineImageUrl" mode="aspectFill"></image>
            </view>

            <view class="title u-f-fdc u-f-jsa marginleft64 flex1 ellipsis">
              <view class="fontsize24 ellipsis color64">{{item.examPaperName}}</view>
              <view class="u-f" v-if="item.status!==0">
                <view class="score flex1 fontsize24">
                  <view v-if="item.hasSubjective">主观分：<span class='red'>{{item.isCheck?item.subjective+'分':'未批改'}}</span></view>
                  <view v-if="item.hasObjective">客观分：<span class='red'>{{item.objective?item.objective:0}}分</span></view>
                </view>
                <view class="marginleft10 placeholder_class red"><strong class="fontsize28">{{item.subjective+item.objective}}</strong>
                  分</view>
              </view>
              <text class="marginleft10 placeholder_class state" v-else>未完成</text>

            </view>
         
            <view class="iconfont icon-yiwancheng" v-if="item.status!==0">
              
            </view>


          </view>
          <view class="videolist-item u-f-jsb u-f-ac" @click="toVideoPage(item)">

            <text class="marginleft10 fontsize24 ellipsis flex1"  :class="item.status?'color64':'placeholder_class'">{{item.examPaperName}}</text>
            <span class="marginleft10 fontsize24 ellipsis" style="width:22%"  :class="item.status?'color64':'placeholder_class'">{{item.examPaperVideoName}}</span>

            <view class="play imgRe">
              <view class="imgTop32">
                <image class="imgRe" :src="item.disciplineImageUrl" mode="aspectFill">
                </image>
                <span class="iconfont icon-bofang position-center"></span>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="videolist">
            
          </view> -->
        <load-more :loadtext="loadtext"></load-more>
      </view>
    </scroll-view>
    <view class="positionRe heightAuto" v-else>
      <no-thing></no-thing>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import loadMore from "@/components/load-more.vue";
  import noThing from "@/components/comm/no-thing.vue"
  import radioComponents from '@/components/radio-components.vue'
  export default {
    computed: { ...mapState(['userInfo', 'subjectList', 'testModel', 'isConnected'])
    },
    components: {
      loadMore,
      noThing,
      'radio-components': radioComponents
    },
    data() {
      return {
        // 学科列表
        subjects: [{
          disciplineTitle: '',
          id: 1
        }],
        subjectIndex: 0,
        size: 5,
        page: 1,
        total: 0,
        testList: [1,2], //试卷列表
        loadtext: '加载更多',
        isLoading: false
      };
    },
    onLoad() {
      this.subjects=this.subjectList
    },
    onShow() {
      this.page = 1
      this.getList()
    },
    methods: {
      ...mapMutations(['setTestModel']),
      // 跳转试卷页面
      toPage(status, id) {
        // 已完成
        if (status) {
          this.$toPage(`./completed?id=${id}`)
        } else {
          this.$toPage(`./exam?id=${id}`)
        }
      },
      toVideoPage(item){
        // 已完成
        if (item.status) {
          this.$toPage(`./detailplay?title=${item.examPaperVideoName}&videoUrl=${item.examPaperVideoUrl}`)
        } else {
          this.$showToast('请先完成练习，再观看解析视频')
        }
        
      },
      // 学科选择器
      PickerChange(e) {
        if (this.subjectIndex != e) {
          this.subjectIndex = e
          this.page = 1
          this.getList()
        }
      },
      async getList() {
        //判断是否连网
        if (!this.isConnected && Object.keys(this.testModel).length > 0) {
           // console.log(this.testModel)
          this.total = this.testModel.total
          this.testList = this.testModel.testList.filter(item=>item.disciplineId===this.subjects[this.subjectIndex].id) 
          let img=''
          switch(this.subjects[this.subjectIndex].disciplineTitle){
            case '语文':img='../../../static/subject/yuwen.png';break;
            case '数学':img='../../../static/subject/shuxue.png';break;
            case '英语':img='../../../static/subject/yingyu.png';break;
            case '物理':img='../../../static/subject/wuli.png';break;
            case '生化':img='../../../static/subject/shenghua.png';break;
          }
          this.testList.forEach(item=>{
           item.disciplineImageUrl=img
          })
        } else if (this.isConnected) {
          await this.getTestPaper()
        } else {
          this.$showToast('未联网无数据')
        }
       
      },
      // 获取试卷列表
      getTestPaper() {
        let disciplineId = this.subjects[this.subjectIndex].id
        // console.log('disciplineId', disciplineId)
        if (disciplineId) {
          uni.showLoading()
          this.isLoading = true
          this.loadtext = '加载中...';
          this.$http.get('/examPaper/list', {
            params: {
              disciplineId,
              size: this.size,
              page: this.page,
              type: 0,
              studentId: this.userInfo.id
            }
          }).then(res => {
            
            this.isLoading = false
            this.total = res.data.total

            if (this.page === 1) {
              this.testList = res.data.data
            } else {
              this.testList = [...this.testList, ...res.data.data]
            }
            // console.log(this.testList)
            this.setTestModel({
              total: this.total,
              testList: this.testList
            })
            if (this.page * this.size < this.total) {
              this.loadtext = '加载更多';
            } else {
              this.loadtext = '到底啦~';
            }
            uni.hideLoading()
          }).catch(err => {
            uni.hideLoading()
          })
        }
      },
      // 触底加载
      nextLoading() {
        if (this.isLoading) {
          return;
        }
        if (this.page * this.size < this.total) {
          ++this.page;
          this.getTestPaper()
        }
      }
    }
  }
</script>

<style lang="scss">
  .testPaper {
    min-height: 100%;
    background-color: $bg_color;

    .heightAuto {
      height: calc(100vh - var(--status-bar-height) - 16vh);
    }

    .main {
      // margin-top:px2vh(50) ;
      padding:px2vw(50) px2vw(32) px2vw(32);

      .testlist {
        // width: 45%;

        &-item,
        .videolist-item {
          background-color: #F5F6FA;
          padding: px2vw(20) px2vw(32);
          border-radius: 8px;
          width: 45%;
          margin-bottom: px2vw(64);

          .imgRe,
          .imgTop32 {
            width: px2vw(420);
            height: px2vh(200);
            border-radius: 8px;

          }

          .marginleft10 {
            margin-left: px2vw(10);
          }

          .marginleft64 {
            margin-left: px2vw(64);
          }

          .title {
            height: px2vh(200);
          }

          .margin-lr {
            margin: 0px px2vw(18) 0px px2vw(30);
          }
        }
        .icon-yiwancheng{
          color: #F55555;
          font-size: px2vw(95);
          align-self: flex-start;
        }
      }

      .imgTop32 {
        position: absolute;
        top: px2vw(-32);
        left: 0px;
      }

      .testlist-item {
        text {
          &:last-child {
            width: 15%;
          }
        }
      }

      .videolist-item {
        .play {
          position: relative;
          height: px2vh(200);

          .icon-bofang {
            font-size: px2vw(75);
            color: #ffffff;
            opacity: 0.75;
          }
        }
      }

      .red {
        color: #F55555;
      }
    }

    .ellipsis {
      @include ellipsis
    }
  }
</style>
